<template>
  <div class="box">
    <van-nav-bar
      title="标题"
      left-arrow
      :fixed="true"
      @click-left="
        () => {
          router.push('home/index');
        }
      "
    />
    <van-search
      v-model="title"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <div class="item" v-if="list.length > 0">
      <van-card
        v-for="(v, i) in list"
        :key="i"
        :num="v.goods_number"
        :price="v.goods_price"
        :title="v.goods_name"
        :thumb="
          v.goods_small_logo
            ? v.goods_small_logo
            : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
        "
      />
    </div>
    <div class="item" v-else>
      <van-empty description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { searchApi } from "@/api/api";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
import _ from "lodash";
const title = ref("");

title.value = route.params.key;

const list = ref([]);

const onSearch = (e) => {
  console.log(e);
  searchFun();
};
const searchFun = () => {
  searchApi(title.value).then((res) => {
    list.value = res.data.message.goods;
  });
};
searchFun();
watch(title,_.debounce(()=>{
    list.value=[];
    searchFun();
},1000))
</script>

<style lang="scss" scoped>
.box{
    width: 100%;
    height: 100%;
    .van-search{
        width: 100%;
        margin-top: 50px;
    }
}
</style>
